<ons-page>
    <ons-tabbar swipeable position="bottom" id="myTabbar">
        <ons-tab page="navbar-tab1.html" label="首页" icon="md-home" active></ons-tab>
        <ons-tab page="navbar-tab2.html" label="发现" icon="md-explore"></ons-tab>
        <ons-tab page="navbar-tab3.html" label="消息" icon="md-email" badge="8"></ons-tab>
        <ons-tab page="navbar-tab4.html" label="购物车" icon="md-shopping-cart" badge="3"></ons-tab>
        <ons-tab page="navbar-tab5.html" label="我的" icon="md-account-circle"></ons-tab>
    </ons-tabbar>

    <template id="navbar-tab1.html">
        <ons-page>
            <ons-toolbar>
                <div class="left">
                    <ons-back-button>返回</ons-back-button>
                </div>
                <div class="center">首页</div>
            </ons-toolbar>
            
            <div style="padding: 20px;">
                <div style="text-align: center; padding: 40px 20px;">
                    <ons-icon icon="md-home" size="80px" style="color: #667eea;"></ons-icon>
                    <h2 style="margin-top: 20px; color: #2c3e50;">首页</h2>
                    <p style="color: #7f8c8d; margin-top: 15px;">
                        这是首页标签的内容区域<br>
                        可以放置任何内容
                    </p>
                </div>

                <ons-card>
                    <div class="title" style="font-size: 18px; font-weight: 600; margin-bottom: 15px;">
                        <ons-icon icon="md-trending-up" style="color: #667eea; margin-right: 8px;"></ons-icon>
                        热门推荐
                    </div>
                    <div class="content">
                        <ons-list>
                            <ons-list-item tappable>
                                <div class="left">
                                    <div style="width: 50px; height: 50px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center;">
                                        <ons-icon icon="md-star" style="color: white; font-size: 28px;"></ons-icon>
                                    </div>
                                </div>
                                <div class="center">
                                    <span class="list-item__title">推荐内容 1</span>
                                    <span class="list-item__subtitle">这是一段描述文字</span>
                                </div>
                                <div class="right">
                                    <ons-icon icon="md-chevron-right"></ons-icon>
                                </div>
                            </ons-list-item>
                            <ons-list-item tappable>
                                <div class="left">
                                    <div style="width: 50px; height: 50px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center;">
                                        <ons-icon icon="md-favorite" style="color: white; font-size: 28px;"></ons-icon>
                                    </div>
                                </div>
                                <div class="center">
                                    <span class="list-item__title">推荐内容 2</span>
                                    <span class="list-item__subtitle">这是一段描述文字</span>
                                </div>
                                <div class="right">
                                    <ons-icon icon="md-chevron-right"></ons-icon>
                                </div>
                            </ons-list-item>
                        </ons-list>
                    </div>
                </ons-card>
            </div>
        </ons-page>
    </template>

    <template id="navbar-tab2.html">
        <ons-page>
            <ons-toolbar>
                <div class="left">
                    <ons-back-button>返回</ons-back-button>
                </div>
                <div class="center">发现</div>
                <div class="right">
                    <ons-toolbar-button onclick="searchAction()">
                        <ons-icon icon="md-search"></ons-icon>
                    </ons-toolbar-button>
                </div>
            </ons-toolbar>
            
            <div style="padding: 20px;">
                <div style="text-align: center; padding: 40px 20px;">
                    <ons-icon icon="md-explore" size="80px" style="color: #667eea;"></ons-icon>
                    <h2 style="margin-top: 20px; color: #2c3e50;">发现</h2>
                    <p style="color: #7f8c8d; margin-top: 15px;">
                        探索更多精彩内容
                    </p>
                </div>

                <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px;">
                    <ons-card style="margin: 0;">
                        <div style="text-align: center; padding: 30px 20px;">
                            <ons-icon icon="md-camera" size="48px" style="color: #667eea;"></ons-icon>
                            <div style="margin-top: 15px; font-weight: 600;">相机</div>
                        </div>
                    </ons-card>
                    <ons-card style="margin: 0;">
                        <div style="text-align: center; padding: 30px 20px;">
                            <ons-icon icon="md-videocam" size="48px" style="color: #e74c3c;"></ons-icon>
                            <div style="margin-top: 15px; font-weight: 600;">视频</div>
                        </div>
                    </ons-card>
                    <ons-card style="margin: 0;">
                        <div style="text-align: center; padding: 30px 20px;">
                            <ons-icon icon="md-music-note" size="48px" style="color: #f39c12;"></ons-icon>
                            <div style="margin-top: 15px; font-weight: 600;">音乐</div>
                        </div>
                    </ons-card>
                    <ons-card style="margin: 0;">
                        <div style="text-align: center; padding: 30px 20px;">
                            <ons-icon icon="md-image" size="48px" style="color: #27ae60;"></ons-icon>
                            <div style="margin-top: 15px; font-weight: 600;">图片</div>
                        </div>
                    </ons-card>
                </div>
            </div>
        </ons-page>
    </template>

    <template id="navbar-tab3.html">
        <ons-page>
            <ons-toolbar>
                <div class="left">
                    <ons-back-button>返回</ons-back-button>
                </div>
                <div class="center">消息</div>
                <div class="right">
                    <ons-toolbar-button onclick="markAllRead()">
                        <ons-icon icon="md-done-all"></ons-icon>
                    </ons-toolbar-button>
                </div>
            </ons-toolbar>
            
            <div style="padding: 20px;">
                <div style="text-align: center; padding: 20px;">
                    <ons-icon icon="md-email" size="60px" style="color: #667eea;"></ons-icon>
                    <h3 style="margin-top: 15px; color: #2c3e50;">消息中心</h3>
                </div>

                <ons-list>
                    <ons-list-item tappable>
                        <div class="left">
                            <div style="width: 50px; height: 50px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                                <ons-icon icon="md-person" style="color: white; font-size: 28px;"></ons-icon>
                            </div>
                        </div>
                        <div class="center">
                            <span class="list-item__title">张三</span>
                            <span class="list-item__subtitle">你好，最近怎么样？</span>
                        </div>
                        <div class="right">
                            <div style="text-align: right;">
                                <div style="font-size: 12px; color: #999;">10:30</div>
                                <div style="margin-top: 5px; background: #e74c3c; color: white; border-radius: 10px; padding: 2px 8px; font-size: 12px; display: inline-block;">3</div>
                            </div>
                        </div>
                    </ons-list-item>
                    <ons-list-item tappable>
                        <div class="left">
                            <div style="width: 50px; height: 50px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                                <ons-icon icon="md-person" style="color: white; font-size: 28px;"></ons-icon>
                            </div>
                        </div>
                        <div class="center">
                            <span class="list-item__title">李四</span>
                            <span class="list-item__subtitle">明天见！</span>
                        </div>
                        <div class="right">
                            <div style="text-align: right;">
                                <div style="font-size: 12px; color: #999;">昨天</div>
                                <div style="margin-top: 5px; background: #e74c3c; color: white; border-radius: 10px; padding: 2px 8px; font-size: 12px; display: inline-block;">5</div>
                            </div>
                        </div>
                    </ons-list-item>
                    <ons-list-item tappable>
                        <div class="left">
                            <div style="width: 50px; height: 50px; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                                <ons-icon icon="md-accounts" style="color: white; font-size: 28px;"></ons-icon>
                            </div>
                        </div>
                        <div class="center">
                            <span class="list-item__title">工作群</span>
                            <span class="list-item__subtitle">王五: 收到</span>
                        </div>
                        <div class="right">
                            <div style="font-size: 12px; color: #999;">2天前</div>
                        </div>
                    </ons-list-item>
                </ons-list>
            </div>
        </ons-page>
    </template>

    <template id="navbar-tab4.html">
        <ons-page>
            <ons-toolbar>
                <div class="left">
                    <ons-back-button>返回</ons-back-button>
                </div>
                <div class="center">购物车</div>
                <div class="right">
                    <ons-toolbar-button onclick="clearCart()">
                        <ons-icon icon="md-delete"></ons-icon>
                    </ons-toolbar-button>
                </div>
            </ons-toolbar>
            
            <div style="padding: 20px;">
                <div style="text-align: center; padding: 20px;">
                    <ons-icon icon="md-shopping-cart" size="60px" style="color: #667eea;"></ons-icon>
                    <h3 style="margin-top: 15px; color: #2c3e50;">购物车</h3>
                </div>

                <ons-list>
                    <ons-list-item>
                        <div class="left">
                            <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center;">
                                <ons-icon icon="md-phone" style="color: white; font-size: 32px;"></ons-icon>
                            </div>
                        </div>
                        <div class="center">
                            <span class="list-item__title">智能手机</span>
                            <span class="list-item__subtitle">¥2999</span>
                        </div>
                        <div class="right">
                            <span style="color: #667eea; font-weight: 600;">x1</span>
                        </div>
                    </ons-list-item>
                    <ons-list-item>
                        <div class="left">
                            <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center;">
                                <ons-icon icon="md-headset" style="color: white; font-size: 32px;"></ons-icon>
                            </div>
                        </div>
                        <div class="center">
                            <span class="list-item__title">无线耳机</span>
                            <span class="list-item__subtitle">¥599</span>
                        </div>
                        <div class="right">
                            <span style="color: #667eea; font-weight: 600;">x2</span>
                        </div>
                    </ons-list-item>
                </ons-list>

                <div style="margin-top: 30px; padding: 20px; background: white; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.08);">
                    <div style="display: flex; justify-content: space-between; margin-bottom: 15px;">
                        <span style="color: #666;">商品总额</span>
                        <span style="font-weight: 600;">¥4197</span>
                    </div>
                    <div style="display: flex; justify-content: space-between; margin-bottom: 15px;">
                        <span style="color: #666;">运费</span>
                        <span style="color: #27ae60;">免运费</span>
                    </div>
                    <div style="border-top: 1px solid #eee; padding-top: 15px; display: flex; justify-content: space-between;">
                        <span style="font-size: 18px; font-weight: 600;">合计</span>
                        <span style="font-size: 20px; font-weight: 600; color: #e74c3c;">¥4197</span>
                    </div>
                </div>

                <ons-button modifier="large--cta" style="margin-top: 20px; width: 100%;" onclick="checkout()">
                    <ons-icon icon="md-card" style="margin-right: 8px;"></ons-icon>
                    去结算
                </ons-button>
            </div>
        </ons-page>
    </template>

    <template id="navbar-tab5.html">
        <ons-page>
            <ons-toolbar>
                <div class="left">
                    <ons-back-button>返回</ons-back-button>
                </div>
                <div class="center">我的</div>
                <div class="right">
                    <ons-toolbar-button onclick="editProfile()">
                        <ons-icon icon="md-edit"></ons-icon>
                    </ons-toolbar-button>
                </div>
            </ons-toolbar>
            
            <div style="padding: 20px;">
                <div style="text-align: center; padding: 30px 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; color: white; margin-bottom: 20px;">
                    <div style="width: 80px; height: 80px; background: white; border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center;">
                        <ons-icon icon="md-account-circle" style="color: #667eea; font-size: 60px;"></ons-icon>
                    </div>
                    <h3 style="margin-top: 15px;">用户名称</h3>
                    <p style="opacity: 0.9; font-size: 14px;">user@example.com</p>
                </div>

                <ons-list>
                    <ons-list-item tappable>
                        <div class="left">
                            <ons-icon icon="md-favorite" style="color: #e74c3c; font-size: 24px;"></ons-icon>
                        </div>
                        <div class="center">我的收藏</div>
                        <div class="right">
                            <ons-icon icon="md-chevron-right"></ons-icon>
                        </div>
                    </ons-list-item>
                    <ons-list-item tappable>
                        <div class="left">
                            <ons-icon icon="md-history" style="color: #667eea; font-size: 24px;"></ons-icon>
                        </div>
                        <div class="center">浏览历史</div>
                        <div class="right">
                            <ons-icon icon="md-chevron-right"></ons-icon>
                        </div>
                    </ons-list-item>
                    <ons-list-item tappable>
                        <div class="left">
                            <ons-icon icon="md-settings" style="color: #667eea; font-size: 24px;"></ons-icon>
                        </div>
                        <div class="center">设置</div>
                        <div class="right">
                            <ons-icon icon="md-chevron-right"></ons-icon>
                        </div>
                    </ons-list-item>
                    <ons-list-item tappable>
                        <div class="left">
                            <ons-icon icon="md-help" style="color: #667eea; font-size: 24px;"></ons-icon>
                        </div>
                        <div class="center">帮助与反馈</div>
                        <div class="right">
                            <ons-icon icon="md-chevron-right"></ons-icon>
                        </div>
                    </ons-list-item>
                    <ons-list-item tappable>
                        <div class="left">
                            <ons-icon icon="md-info" style="color: #667eea; font-size: 24px;"></ons-icon>
                        </div>
                        <div class="center">关于</div>
                        <div class="right">
                            <ons-icon icon="md-chevron-right"></ons-icon>
                        </div>
                    </ons-list-item>
                </ons-list>

                <ons-button modifier="large--quiet" style="margin-top: 30px; width: 100%;" onclick="logout()">
                    <ons-icon icon="md-exit-to-app" style="margin-right: 8px;"></ons-icon>
                    退出登录
                </ons-button>
            </div>
        </ons-page>
    </template>

    <script>
        function searchAction() {
            ons.notification.toast('搜索功能', { timeout: 1500 });
        }

        function markAllRead() {
            ons.notification.toast('已标记全部已读', { timeout: 1500 });
        }

        function clearCart() {
            ons.notification.confirm({
                message: '确定要清空购物车吗？',
                title: '清空购物车',
                buttonLabels: ['取消', '确定'],
                callback: function(index) {
                    if (index === 1) {
                        ons.notification.toast('购物车已清空', { timeout: 1500 });
                    }
                }
            });
        }

        function checkout() {
            ons.notification.toast('跳转到结算页面', { timeout: 1500 });
        }

        function editProfile() {
            ons.notification.toast('编辑个人资料', { timeout: 1500 });
        }

        function logout() {
            ons.notification.confirm({
                message: '确定要退出登录吗？',
                title: '退出',
                buttonLabels: ['取消', '确定'],
                callback: function(index) {
                    if (index === 1) {
                        ons.notification.toast('已退出登录', { timeout: 1500 });
                    }
                }
            });
        }
    </script>
</ons-page>
